<script lang="ts">
import milkdownStyleLight from "@milkdown/crepe/theme/nord.css?inline";
import milkdownSytleDark from "@milkdown/crepe/theme/nord-dark.css?inline";

import { Component, Provide, Vue, Watch } from 'vue-facing-decorator';
import HeaderBar from '@/pages/main/MainPage/HeaderBar.vue';
import { currentUser, type UserInfo } from './api/auth/auth';
import { ElNotification } from 'element-plus';

@Component({
  components: {
    HeaderBar,
  }
})
export default class App extends Vue {
  get currentRoute() {
    return this.$router.currentRoute.value;
  }
  get currentRouteAuthLevel() {
    return this.currentRoute.meta.auth;
  }
  @Provide() userInfo: UserInfo | null | undefined = void 0;
  @Provide() async updateLoginInfo() {
    const resp = await currentUser();
    if (resp.error === 'Bad Gateway') {
      ElNotification({
        type: 'error',
        message: '无法连接到后端服务器，请检查后端是否成功启动',
        duration: 0,
      })
    }
    if (resp.error != null) {
      this.userInfo = null;
    } else if (resp.data) {
      this.userInfo = resp.data;
    }
  }

  get pageRequirePermission(): string {
    return (this.$route?.meta?.auth ?? '') + '';
  }
  get hasPermission() {
    const userRole = this.userInfo?.role || 'guest';
    const requiredRole = this.pageRequirePermission || 'guest';
    const roleList = ['guest', 'user', 'mod', 'admin'];
    return roleList.indexOf(requiredRole) <= roleList.indexOf(userRole);
  }

  @Provide() theme: 'light' | 'dark' = 'dark';
  @Provide() setTheme(theme: 'light' | 'dark') {
    localStorage.setItem('theme', theme);
    this.updateTheme();
  }
  updateTheme() {
    const theme = localStorage.getItem('theme') === 'light' ? 'light' : 'dark';
    this.theme = theme;
    if (theme === 'dark') document.documentElement.classList.add('dark');
    else document.documentElement.classList.remove('dark');
  }
  initTheme() {
    this.updateTheme();
    window.addEventListener('storage', () => {
      this.updateTheme();
    });
  }
  @Watch('theme', { immediate: true })
  onThemeChange() {
    if (this.theme) this.loadTheme(this.theme);
  }
  themeStyle: HTMLStyleElement | null = null;
  async loadTheme(theme: 'light' | 'dark') {
    const css = theme === 'light' ? milkdownStyleLight : milkdownSytleDark;
    if (!this.themeStyle) {
      this.themeStyle = document.createElement('style');
      this.themeStyle.id = 'theme-style';
      document.head.appendChild(this.themeStyle);
    }
    this.themeStyle.innerHTML = css;
    this.themeStyle.setAttribute('data-theme', theme);
  }

  windowWidth: number = window.innerWidth;
  listenWindowSize() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth;
    });
    this.windowWidth = window.innerWidth;
  }
  get thinMode() {
    return this.windowWidth < 768;
  }
  get tinyMode() {
    return this.windowWidth < 480;
  }

  async mounted() {
    this.initTheme();
    this.updateLoginInfo();
    this.listenWindowSize();
  }
}
</script>

<template>
<div class="page" :class="[thinMode ? 'thin-mode' : 'wide-mode', tinyMode ? 'tiny-mode' : null]">
  <header>
    <header-bar />
  </header>
  <div class="content" v-if="userInfo !== (void 0)">
    <router-view v-if="hasPermission" />
    <div v-else class="no-permission">
      <h1>无权访问此页面</h1>
      <p>您没有权限访问此页面。</p>
    </div>
  </div>
  <footer>
    &copy; 2025
  </footer>
</div>
</template>

<style scoped>
footer {
  margin-top: 20px;
  border-top: 1px solid var(--el-border-color-light);
  font-size: 80%;
  color: var(--el-text-color-secondary);
  text-align: center;
  padding: 10px 0 70px;
}
</style>
